<template>
  <draggable
    class="dragArea"
    tag="div"
    :list="tasks"
    :group="{ name: 'g1' }"
    item-key="name"
  >
    <template #item="{ element }">
      <div class="menu-item">
        <div class="item_top">
          <el-col :span="18">
            <el-select v-model="element.selected" placeholder="请选择">
                    <el-option
                      v-for="item in element.drop_down_list"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                    </el-option>
                  </el-select>
            
          </el-col>
          <i class="el-icon-folder-add document_icon" @click="add(item)"></i>
          <i
            class="el-icon-folder-delete document_icon"
            @click="del_menu_item(item)"
          ></i>
        </div>
        <div class="item_footer">
         <h4> {{ element.parent_name }}</h4>
           <draggable
            class="dragArea"
            tag="div"
            :list="element.children"
            :group="{ name: 'g2' }"
            item-key="name"
          >
          <template #item="{ element }">
            <div>
              {{element.child_name}} 
            </div>
        </template>
        </draggable>
        </div>
       
        <!-- <nested-draggable :tasks="element.children" /> -->
      </div>
    </template>
  </draggable>
</template>
<script>
import draggable from "vuedraggable";
export default {
  props: {
    tasks: {
      required: true,
      type: Array,
    },
  },
  components: {
    draggable,
  },
  name: "nested-draggable",
};
</script>
<style lang="scss" scoped>
 .menuDiv {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 20px;
      .menu-item {
        margin-right: 20px;
        border: 1px solid gainsboro;
        border-radius: 4px;
        min-height: 100px;
        .document_icon {
          font-size: 26px;
          cursor: pointer;
        }
      }
      .item_top {
        padding: 10px;
        border-bottom: 1px solid gainsboro;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
      .item_footer {
        padding: 0 10px;
      }
    }
</style>